<template>
	<hr class="two" />
	<h2>==== LifeCycle 生命周期 ===</h2>

	<h1>当前求和为:{{ sum }}</h1>
	<button @click="sum++">点我加一</button>

	<hr />
</template>

<script>
import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue';

export default {
	name: 'LifeCycle',
	setup() {
		let sum = ref(0);

		/*
				//通过组合式api的形式去使用生命周期钩子
				///setup()相当于beforeCreate()和created()
				onBeforeMount(() => {
					console.log('---LifeCycle-beforeMount----');
				});
				onMounted(() => {
					console.log('---LifeCycle--mounted-----');
				});
				onBeforeUpdate(() => {
					console.log('---LifeCycle--beforeUpdate-----')
				});
				onUpdated(() => {
					console.log('---LifeCycle--updated-----');
				});
				onBeforeUnmount(() => {
					console.log('---LifeCycle--beforeUnmount----');
				});
				onUnmounted(() => {
					console.log('---LifeCycle--unmounted----');
				})
		*/

		// console.log('---LifeCycle--setup----', sum)

		//返回一个对象
		return {
			sum,
		}
	},
	//使用配置项的形式使用生命周期钩子
	// beforeCreate() {
	//   console.log('---LifeCycle-beforeCreate!!----');
	// },
	// created() {
	//   console.log('---LifeCycle-created!!----');
	// },
	// beforeMount() {
	//   console.log('---LifeCycle-beforeMount----');
	// },
	// mounted() {
	//   console.log('---LifeCycle--mounted-----');
	// },
	// beforeUpdate() {
	//   console.log('---LifeCycle--beforeUpdate-----')
	// },
	// updated() {
	//   console.log('---LifeCycle--updated-----');
	// },
	// beforeUnmount() {
	//   console.log('---LifeCycle--beforeUnmount----');
	// },
	// unmounted() {
	//   console.log('---LifeCycle--unmounted----');
	// }
}
</script>

<style>
</style>